<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            @submit="handleSubmit"
          >
            <a-form-item label="数据源类型">
              <a-select
                style="width: 180px"
                placeholder="请选择数据源类型"
                v-model="dataSourceKey"
                allow-clear
              >
                <a-select-option
                  :value="item.id"
                  v-for="(item,index) in menuType"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="业务名称">
              <a-input
                allow-clear
                placeholder="请输入业务名称"
                v-model="peopleName"
              ></a-input>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                @click="add('')"
              >新增人群划分</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
    <a-card id="change">
      <a-table
        bordered
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        :data-source="dataSource"
        @change="handleTableChange"
        :scroll="{ x: true }"
      >
        <template
          slot="pageStatus"
          slot-scope="txt,record"
        >
          <span v-if="record.pageStatus == 1">是</span>
          <span v-else>否</span>

        </template>
        <template
          slot="action"
          slot-scope="txt, record"
        >

         
          <!-- <a
            class="mr-10"
            @click="add(record)"
          >
            <a-icon type="edit" />编辑
          </a> -->
          <a
            class="mr-10"
            @click="deleteRecord(record)"
          >
            <a-icon type="delete" />删除
          </a>
        </template>
      </a-table>
      <create
        v-if="showAdd"
        :content="content"
        :appid="appid"
        @close="close"
      ></create>
    </a-card>
  </div>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
import create from './create.vue'
const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'id'
  },
  {
    title: '人群划分业务名称',
    dataIndex: 'peopleName'
  },
  {
    title: '数据源',
    dataIndex:'dataSourceName'
  },
  {
    title:'是否分页',
    scopedSlots: { customRender: 'pageStatus' }
  },
  {
    title:'APPID替换字段',
    dataIndex:'getAppidStr'
  },
  {
    title: '创建时间',
    width: 200,
    dataIndex: 'createTime'
  },
  {
    title: '操作',
    width: 80,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    create,
  },
  props: {
    appid: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      columns,
      peopleName:'',
      urlKey: 'basemgt-wx',
      dataSourceKey: undefined,
      dataSource: [],
      menuType: [],
      loading: false,
      name: '',
      content: {},
      form: this.$form.createForm(this),
      showAdd: false,
      showDetail: false,
      detail: {},
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  mounted() {
    this.getGroupList()
    this.loadData()
    this.getMenuList()
  },
  watch: {
    appid() {
      this.getGroupList()
      this.loadData()
    }
  },
  methods: {
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    close() {
      this.showAdd = false
      this.loadData()
    },
    add(record) {
      this.showAdd = true
      this.content = record
    },
    toDetail(record) {
      this.showDetail = true
      this.detail = record
    },
    closeDetail() {
      this.showDetail = false
    },
    getGroupList() {
      const params = {}
      getAction(`${this.urlKey}/WxPlaceHolder/findDataSourceInfo`, params).then(data => {
        if (data.code == 200) {
          this.menuType = data.data
        } else {
          this.$message.warning(data.msg || data.message)
        }
      })
    },
    getMenuList() {
      const params = {}
      getAction(`${this.urlKey}/WxPlaceHolder/findDataSourceInfo`, params).then(data => {
        if (data.code == 200) {
          this.menuType = data.data
        } else {
          this.$message.warning(data.msg || data.message)
        }
      })
    },
    loadData(key) {
      this.loading = true
      const params = {
        dataSourceKey: this.dataSourceKey,
        peopleName: this.peopleName,
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.current
      }
      if(key){
        params.pageNum = 1
        this.pagination.current = 1
      }
     try {
       postAction(`${this.urlKey}/managerPeopleRecord/findWxManagerPeopleRecordListByCondition`, params).then(data => {
        if (data.code == 200) {
          this.dataSource = data.data.records
          this.pagination.total = data.data.total
        } else {
          this.$message.warning(data.msg || data.message)
        }
        this.loading = false
      })
     } catch (error) {
        this.$message.warning('获取列表失败！')
      } finally {
        this.loading = false
      }
    },

    deleteRecord(item) {
      this.$confirm({
        content: '确定要删除' + item.peopleName + '吗？',
        onOk: () => {
          const params = {
            id: item.id
          }
          getAction(`${this.urlKey}/managerPeopleRecord/deleteWxManagerPeopleRecordById`, params).then(data => {
            if (data.code == 200) {
              this.$message.success('删除成功')
              this.loadData()
            } else {
              this.$message.warning(data.msg || data.message)
            }
          })
        },
        onCancel() {}
      })
    }
  }
}
</script>
<style>
#change .ant-table{
  font-size: 15px!important;
}
</style>
